<template>
    <div class="detail-page" ref="scrollRef">
        <div v-if="!loading">
        <div class="movie-info" v-if="mivieinfo" :style="{'backgroundColor':mivieinfo.backgroundColor}">
            <div class="topback">
                <router-link tag="div" to="/home" class="old">猫眼电影</router-link>
                &nbsp;>&nbsp;
                <span class="now">{{mivieinfo.nm}}</span>
            </div>
            <div class="movie-info-top">
                <div class="movie-cover">
                    <router-link tag="div" :to="'/video?id='+mivieinfo.id" class="img">
                        <img class="poster" :src="mivieinfo.img" alt="">
                        <img class="play-icon" src="../assets/images/poster-play.png" alt="">
                    </router-link>
                </div>
                <div class="movie-desc">
                    <div class="movie-desc-top">
                        <div class="movie-cn-name">
                            <h1>{{mivieinfo.nm}}</h1>
                        </div>
                        <div class="movie-en-name">{{mivieinfo.enm}}</div>
                        <div class="movie-other-info">
                            <div class="movie-type">
                                <span class="movie-cat">{{catinfo[0]}} / {{catinfo[1]}}</span>
                                <span class="movie-tag" v-if="mivieinfo.ver">
                                    <img src="../assets/images//movie-tag-2DIMAX.png" alt="">
                                </span>
                            </div>
                            <div class="actors">
                                <span>{{starinfo[0]}}&nbsp;/</span>
                                <span>{{starinfo[1]}}&nbsp;/</span>
                                <span>{{starinfo[2]}}</span>
                            </div>
                            <div class="movie-show-time">
                                <span>{{mivieinfo.onlineDate}} / {{mivieinfo.dur}}分钟</span>
                            </div>
                        </div>
                    </div>
                    <div class="btns">
                        <button @click="wish" :class="{'wanted-to-watch':wishflag}">
                            <img src="../assets/images/want-to-watch.png" alt="" v-if="!wishflag">
                            <span>{{wishflag?'已想看':'想看'}}</span>
                        </button>
                        <button>
                            <img src="../assets/images/star.png" alt="">
                            <span>看过</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="real-time-word-of-mouth" v-if="mivieinfo.scoreLabel!='暂无评分'">
                <div class="top">
                    <div class="left">
                        <img src="../assets/images/logo-new.png" alt="">
                        <span>{{mivieinfo.scoreLabel}}</span>
                    </div>
                    <div class="right">
                        <div class="num">
                            <span><countTo :startVal='startVal' :endVal='endVal1' :duration='2000'></countTo></span>
                            <span>人想看</span>
                        </div>
                        <div class="num watched">
                            <span><countTo :startVal='startVal' :endVal='endVal2' :duration='2000'></countTo></span>
                            <span>人看过</span>
                        </div>
                        <div class="img">
                            <img src="../assets/images/arrow-right-white.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <div class="left-section">
                        <div class="left">
                            <span class="score">{{mivieinfo.sc}}</span>
                            <div class="people-grade">
                                <span><countTo :startVal='startVal' :endVal='endVal3' :duration='2000'></countTo></span>&nbsp;
                                <span>人评</span>
                            </div>
                        </div>
                        <div class="right">
                            <div class="stars-percent-bar">
                                <div class="stars">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div class="percent" :class="{'active1':!loading}"></div>
                                </div>
                            </div>
                            <div class="stars-percent-bar">
                                <div class="stars">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div class="percent" :class="{'active1':!loading}"></div>
                                </div>
                            </div>
                            <div class="stars-percent-bar">
                                <div class="stars">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div class="percent" :class="{'active1':!loading}"></div>
                                </div>
                            </div>
                            <div class="stars-percent-bar">
                                <div class="stars">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div class="percent" :class="{'active1':!loading}"></div>
                                </div>
                            </div>
                            <div class="stars-percent-bar">
                                <div class="stars">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/grey-star.png" alt="">
                                    <img src="../assets/images/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div class="percent" :class="{'active1':!loading}"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-reputation" v-if="reputation.movieRank">
                        <div class="reputation-box">
                            <img src="../assets/images//top1-reputation.png" alt="">
                            <div class="rank">
                                <span class="rank-top">TOP</span>
                                <span class="rank-num">{{reputation.movieRank}}</span>
                            </div>
                            <div class="desc">
                                <span class="first-word">{{reputation.firstWord}}</span>
                                <span class="second-word">{{reputation.secondWord}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="awardBottom"></div>
            </div>
            <div class="real-time-word-of-mouth" v-if="mivieinfo.scoreLabel=='暂无评分'">
                <div class="top">
                    <div class="left">
                        <img src="../assets/images/logo-new.png" alt="">
                        <span>猫眼想看</span>
                    </div>
                </div>
                <div class="middle">
                    <div class="left-section">
                        <div class="left wanted">
                            <div class="score">
                                <span><countTo :startVal='startVal' :endVal='endVal4' :duration='2000'></countTo></span>
                                <span class="txt">人想看</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="awardBottom"></div>
            </div>
            <div class="movie-watching-tips" v-if="mivieinfo.egg">
                <div class="tip">
                    <div class="icon">
                        <img src="../assets/images//tip-icon-surprise.png" alt="">
                    </div>
                    <span>有1个彩蛋，片尾</span>
                </div>
            </div>
            <div class="brief-introduction">
                <div class="title">
                    <span>简介</span>
                    <div>
                        <button type="button" :class="[{'open':open},{'close':!open}]" @click="open=!open">
                            <span>展开</span>
                            <img src="../assets/images/arrow-right.png" alt="">
                        </button>
                    </div>
                </div>
                <div class="content">
                    <p :class="['normal-line', {'line-clamp':open}]">{{mivieinfo.dra}}</p>
                </div>
            </div>
            <div class="actors" v-if="celebrities">
                <div class="title">
                    <span>演职人员</span>
                    <div class="go-to-all-actors">
                        <span>全部</span>
                        <img src="../assets/images/arrow-right.png" alt="">
                    </div>
                </div>
                <div class="actor-list">
                    <ul>
                        <li v-for="(item,index) in celebrities" :key="index" :class="{'left-margin':item.roles}">
                            <div>
                                <img :src="item.avatar" alt="">
                                <span class="name">{{item.cnm}}</span>
                                <span class="role">{{item.desc}}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="videos" v-if="feedVideos">
                <div class="title">
                    <span>视频推荐</span>
                    <div class="go-to-all">
                        <span>全部</span>
                        <img src="../assets/images//arrow-right.png" alt="">
                    </div>
                </div>
                <div class="videos-list">
                    <ul>
                        <li class="video" v-for="(item,index) in feedVideos" :key="index" @click="showfreed(item.id)">
                            <div>
                                <img :src="item.video.imgUrl" alt="">
                                <div class="play">
                                    <div class="triangle"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="photos" v-if="moviephotos">
                <div class="title">
                    <span>剧照</span>
                    <div class="go-to-all">
                        <span>全部{{moviephotos.length}}张</span>
                        <img src="../assets/images/arrow-right.png" alt="">
                    </div>
                </div>
                <div class="photos-list">
                    <ul>
                        <li v-for="(item,index) in moviephotos" :key="index">
                            <div>
                                <img :src="item" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <section class="discussion" v-if="comments">
            <header>
                <span class="title">短评</span>
            </header>
            <div class="comments">
                <article :class="{'no-padding-top':index==0}" v-for="(item,index) in comments" :key="index">
                    <div class="left">
                        <img :src="item.avatarUrl" alt="" class="avatar">
                    </div>
                    <div class="right">
                        <div class="top">
                            <div class="title-container">
                                <div class="name-box">
                                    <span class="name">{{item.nick}}</span>
                                    <img src="https://obj.pipi.cn/festatic/common/image/c853ef8e3cb69ad7bced9c38c39af045.png" alt="" class="level-icon">
                                </div>
                                <div class="commentstar">
                                    <div class="star-wrap" v-if="item.score!=0">
                                        <!-- <img class="star-img" v-show="item.score%2==0" src="../assets/images/star-full-graded.png" alt="">
                                        <img class="star-img" v-show="item.score==1" src="../assets/images/star-half-graded.png" alt="">
                                        <img class="star-img" src="../assets/images/star-not-graded.png" alt="">
                                        <img class="star-img" src="../assets/images/star-not-graded.png" alt="">
                                        <img class="star-img" src="../assets/images/star-not-graded.png" alt=""> -->
                                        <van-rate v-model="item.score"  color="#ffd21e" count="10" allow-half void-icon="star" void-color="#eee" size="8px" />
                                        <span class="star-score">{{item.score}}</span>
                                        <span class="star-word">分</span>
                                    </div>
                                    <span class="commentstar-buyticket" v-if="item.buyTicket">购票</span>
                                </div>
                            </div>
                            <div class="title-appove">
                                <div class="hierarchy">
                                    <div class="link">
                                        <img class="thumb-up" src="https://p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q" alt="">
                                        <span class="approve-word">{{item.upCount}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="middle">
                            <span class="comment-content">{{item.content}}</span>
                        </div>
                        <div class="bottom">
                            <span class="time">{{item.time | time}}</span>
                            <div class="goto-comments">
                                <div class="reply">
                                    {{item.replyCount}}<span>回复</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </section>

        <section class="related-movies" v-if="relatedMovies">
            <header>
                <span>相关影片</span>
            </header>
            <div class="movies">
                <ul>
                    <li @click="related(item.id)" v-for="(item,index) in relatedMovies" :key="index">
                        <div class="img-box">
                            <img :src="item.img+'?imageView2/1/w/192/h/268/q/80'" alt="">
                            <div class="img-mask"></div>
                            <div class="grade" v-if="item.sc!=0">
                                <span>猫眼评分</span>
                                <span class="score">{{item.sc}}</span>
                            </div>
                            <div class="grade" v-if="item.sc==0">
                                <span>暂无评分</span>
                            </div>
                        </div>
                        <span class="name">{{item.title}}</span>
                    </li>
                </ul>
            </div>
        </section>
        <div class="buy-ticket-btn">
            <div class="buy-wrapper" @click="moviebuy">
                <img src="../assets/images/share-icon.png" alt="">
                <div class="goto-ticket">购票</div>
            </div>
        </div>
        </div>
        <div class="lodaing" v-if="loading">
            <div class="img">
              <img class="img1" src="../assets/images/maoyan01.png" alt="" />
              <img class="img2" src="../assets/images/maoyan02.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
import {getMovieDetail} from '../api/movie.js'
import countTo from 'vue-count-to';
    export default {
        data() {
            return {
                mivieinfo: null,//影片信息
                catinfo:null,//影片分类
                starinfo:null,//主演信息
                reputation:null,//评分信息
                celebrities:null,//演员信息
                feedVideos:null,//视频推荐
                moviephotos:null,//剧照
                comments:null,//评论
                relatedMovies:null,//相关视频
                open:true,//展开内容
                loading:false,//加载动画
                currentId:null,//当前电影id
                wishlist:[],//想看列表
                wishflag:false,

                //数字开始
                startVal: 0,
                //数字结束
                endVal1:null,
                endVal2:null,
                endVal3:null,
                endVal4:null,
            };
        },
        methods: {
            //获取影片详情
            getDteailFun(id){
                getMovieDetail({movieId:id}).then(data=>{
                    // console.log(data);
                    this.mivieinfo=data.movie
                    this.moviephotos=data.movie.photos
                    this.catinfo=data.movie.cat.split(',')
                    this.starinfo=data.movie.star.split(',')
                    this.reputation=data.reputation
                    this.celebrities=data.celebrities
                    this.feedVideos=data.feedVideos.feeds
                    this.comments=data.comments.hotComments
                    this.relatedMovies=data.relatedMovies
                    // console.log(this.feedVideos);

                    //设置数字结束
                    this.endVal1=this.mivieinfo.wish
                    this.endVal2=this.mivieinfo.watched
                    this.endVal3=this.mivieinfo.snum
                    this.endVal4=this.mivieinfo.wish

                    setTimeout(() => {
                        this.loading=false
                    }, 500);
                })
            },
            related(id){
                this.loading=true
                this.$refs.scrollRef.scrollTop= 0;
                this.getDteailFun(id)
            },
            wish(){
                this.wishflag=!this.wishflag
                if (this.wishflag) {
                    this.mivieinfo.wish = this.mivieinfo.wish+1
                    this.endVal1=this.mivieinfo.wish
                    this.wishlist.push({
                        id:this.mivieinfo.id
                    })
                }else{
                    this.mivieinfo.wish = this.mivieinfo.wish-1
                    this.endVal1=this.mivieinfo.wish
                }
            },
            moviebuy(){
                this.$router.push({path:'/ticket',query:{movieId:this.mivieinfo.id,cityId:this.cityId}})
            },
            showfreed(id){
                this.$router.push({path:'/video',query:{id:this.mivieinfo.id,freedId:id}})
            }
        },
        created() {
            this.loading=true
            this.currentId=this.$route.query.id
            // console.log(this.$route.query.id);
            this.getDteailFun(this.$route.query.id)
        },
        // time
        filters:{
                time(value){
                    var time = new Date(value)
                    var m = time.getMonth()+1
                    var d = time.getDate()
        
                    return `${m}月${d}日`;
            }
        },
        components: { countTo },
    }
</script>

<style lang="less" scoped>
.detail-page{
    height: 100%;
    overflow-y: scroll;
.movie-info{
    width: 100%;
    overflow: hidden;
    background-color: #664d29;
    padding: 21px 16px;
    box-sizing: border-box;
    .topback{
        display: flex;
        align-items: center;
        color: #ccc;
        margin-bottom: 15px;
        .now,
        .old{
            color: #ccc;
            font-size: 14px;
        }
    }
    .movie-info-top{
        display: flex;
        justify-content: flex-start;
       
        .movie-cover{
            width: 100px;
            height: 138px;
            flex-shrink: 0;
            position: relative;

            .poster{
                width: 100px;
                height: 138px;
            }
            .play-icon{
                width: 30px;
                height: 30px;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }
        .movie-desc{
            flex-grow: 1;
            margin-left: 12px;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            overflow: hidden;

            .movie-desc-top{
                display: flex;
                flex-flow: column;
                justify-content: flex-start;
                flex-grow: 1;

                .movie-cn-name{
                    height: 38px;
                    font-size: 20px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    font-weight: 700;
    
                    &>h1{
                        height: 30px;
                        line-height: 30px;
                        font-size: 20px;
                        display: inline-block;
                        width: 206px;
                        color:#fff;
                        font-weight: bold;
                    }
                }
                .movie-en-name{
                    height: 18px;
                    line-height: 18px;
                    color: #fff;
                    font-size: 12px;
                    opacity: .6;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
                .movie-other-info{
                    display: flex;
                    flex-grow: 1;
                    flex-flow: column;
                    color: #fff;
                    justify-content: center;

                    .movie-type{
                        height: 18px;
                        font-size: 12px;
                        display: flex;
                        align-items: center;

                        .movie-cat{
                            opacity: 0.6;
                        }
                        .movie-tag{
                            border-radius: 2px;
                            margin-left: 4px;
                            vertical-align: text-bottom;
                            display: flex;
                            align-items: center;

                            &>img{
                                height: 14px;
                            }
                        }
                    }
                    .actors{
                        height: 18px;
                        line-height: 18px;
                        opacity: .6;
                        font-size: 12px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        margin: 0;
                    }
                    .movie-show-time{
                        height: 21px;
                        line-height: 21px;
                        &>span{
                            opacity: .6;
                            font-size: 12px;
                        }
                    }
                }
            }
            .btns{
                display: flex;
                justify-content: space-between;            
                &>button{
                    padding: 15px;
                    border: none;             
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: hsla(0,0%,100%,.35);
                    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
                    border-radius: 4px;
                    font-size: 14px;
                    width: 47.61904762%;
                    height: 0.6rem;
                    color: #fff;
                    &>img{
                        width: 14px;
                        height: 14px;
                        margin-right: 5px;
                    }
                }
                .wanted-to-watch{
                    background-color: hsla(0,0%,100%,.2);
                    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 15%);
                    opacity: .3;
                    font-size: 14px;
                }
            }
        }
    }
    .real-time-word-of-mouth{
        background-color: rgba(0,0,0,.18);
        border-radius: 8px;
        margin-top: 15px;
        padding: 9px 10px 10px 0;
        box-sizing: border-box;

        .top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: PingFangSC-Regular;
            padding-left: 10px;

            .left{
                font-size: 12px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-weight: 400;
                &>img{
                    width: 15.6px;
                    height: 15.6px;
                    margin-right: 4px;
                }
                &>span{
                    font-size: 12px;
                    color: #fff;
                }
            }
            .right{
                display: flex;
                justify-content: flex-end;
                align-items: center;
                font-size: 12px;
                margin-right: 2px;

                .num{
                    color: #fff;
                    opacity: 0.6;
                    font-size: 12px;
                    transform: scale(0.9);
                }
                .watch{
                    margin-left: 13px;
                }
                .img{

                    &>img{
                        width: 5px;
                        height: 9px;
                        margin-left: 4px;
                    }
                }
            }
        }
        .middle{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 11px 3px;

            .left-section{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-grow: 1;

                .left{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-end;
                    margin-right: 4px;

                    .score{
                        font-weight: 600;
                        font-family: MaoYanHeiTi-H-H;
                        font-size: 26px;
                        color: #ffb400;
                        line-height: 26px;
                        letter-spacing: 0;
                        text-align: center;
                        margin-bottom: 4px;

                        .txt{
                            font-size: 12px;
                            color: #fff;
                            opacity: .8;
                        }

                    }
                    .people-grade{
                        font-weight: 400;
                        opacity: .6;
                        font-family: PingFangSC-Regular;
                        font-size: 20px;
                        display: flex;
                        word-break: keep-all;
                        color: hsla(0,0%,100%,.4);
                        letter-spacing: 0;
                        text-align: center;
                        line-height: 10px;
                        zoom: .5;
                        
                        &>span{
                            font-weight: 400;
                            font-family: PingFangSC-Regular;
                            font-size: 20px;           
                            word-break: keep-all;
                            color: hsla(0,0%,100%,.4);
                            letter-spacing: 0;
                            text-align: center;
                            line-height: 10px;
                        }
                    }
                }
                .wanted{
                    align-items: center!important;
                }
                .right{
                    .stars-percent-bar{
                        display: flex;
                        align-items: center;
                        margin-bottom: 3px;

                        .stars{
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            width: 35px;

                            &>img{
                                width: 5px;
                                height: 5px;
                                margin-left: 0.3px;
                                opacity: 0.4;
                            }
                        }
                        .bar{
                            width: 71px;
                            height: 4px;
                            background-color: hsla(0,0%,100%,.06);
                            border-radius:1px;
                            margin-left: 4px;

                            .percent{
                                height: 100%;
                                width: 0;
                                background: hsla(0,0%,100%,.3);
                                border-radius: 1px;
                                transition: width 1.5s;
                            }
                        }
                        &:nth-child(1) {
                            .bar {
                               .percent {
                                  &.active1 {
                                    animation: animation2 1s linear forwards;
                                 }
                               }
                            }
                         }
                        &:nth-child(2) {
                            .bar {
                               .percent {
                                  &.active1 {
                                    animation: animation3 1s linear forwards;
                                 }
                               }
                            }
                         }
                        &:nth-child(3) {
                            .bar {
                               .percent {
                                  &.active1 {
                                    animation: animation4 1s linear forwards;
                                 }
                               }
                            }
                         }
                        &:nth-child(4) {
                            .bar {
                               .percent {
                                  &.active1 {
                                    animation: animation5 1s linear forwards;
                                 }
                               }
                            }
                         }
                        &:nth-child(5) {
                            .bar {
                               .percent {
                                  &.active1 {
                                    animation: animation6 1s linear forwards;
                                 }
                               }
                            }
                         }
                    }
                }
            }
            .right-reputation{
                margin-right: 5px;
                width: 120px;
                display: flex;
                justify-content: flex-end;
                align-self: center;

                .reputation-box{
                    width: 120px;
                    height: 44px;
                    box-sizing: border-box;
                    background-image: linear-gradient(270deg,rgba(0,0,0,.04),rgba(226,177,117,.11));
                    border-radius: 6px;
                    padding: 4px;
                    position: relative;

                    &>img{
                        width: 29px;
                        height: 36px;
                    }
                    .rank{
                        position: absolute;
                        left: 0;
                        top: 9px;
                        display: flex;
                        flex-direction: column;
                        font-family: PingFangSC-Medium;
                        width: 29px;
                        margin-left: 4px;

                        .rank-top{
                            font-size: 18px;
                            line-height: 10px;
                            font-weight: 600;
                            text-shadow: 0 1px 4px #8e5d25;
                            font-family: PingFangSC-Semibold;
                            color: rgba(255,229,150,.7);
                            letter-spacing: 0;
                            transform: scale(.5);
                            width: 19px;
                            transform-origin: 50%;
                        }
                        .rank-num{
                            font-size: 15px;
                            line-height: 13px;
                            font-family: MaoYanHeiTi-H-H;
                            color: #ffe186;
                            letter-spacing: 0;
                            text-align: center;
                            margin-top: 3px;
                        }
                    }
                    .desc{
                        height: 27px;
                        position: absolute;
                        left: 38px;
                        top: 8px;
                        display: flex;
                        flex-direction: column;
                        overflow: hidden;
                        white-space: nowrap;
                        width: 85px;

                        .first-word{
                            font-weight: 400;
                            font-family: PingFangSC-Regular;
                            opacity: .7;
                            font-size: 20px;
                            color: #ffeec1;
                            letter-spacing: 0;
                            height: 13px;
                            line-height: 13px;
                            transform: scale(.5);
                            -webkit-transform: scale(.5);
                            transform-origin: 0;
                        }
                        .second-word{
                            font-weight: 500;
                            font-family: PingFangSC-Medium;
                            color: #fff4bd;
                            letter-spacing: 0;
                            line-height: 14px;
                            height: 14px;
                            text-shadow: 0 1px 3px rgb(166 97 48 / 50%);
                            font-size: 22px;
                            transform: scale(.5);
                            -webkit-transform: scale(.5);
                            transform-origin: 0;
                        }
                    }

                    &::after{
                        display: block;
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 200%;
                        height: 200%;
                        border: 1px solid #b49c70;
                        content: " ";
                        -webkit-transform: scale(.5);
                        transform: scale(.5);
                        -webkit-transform-origin: 0 0;
                        transform-origin: 0 0;
                        border-radius: 12px;
                    }
                }
            }
        }
        .awardBottom{
            margin-top: 7px;
            background: rgba(0,0,0,.12);
            border-radius: 6px;
            padding: 0 5px 0 11px;
            margin-left: 10px;
        }
    }
    .movie-watching-tips{
        position: relative;
        padding: 10px 0;
        font-size: 15px;

        .tip{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 5px 0;

            .icon{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 18px;
                height: 18px;
                margin-right: 7px;
            }
            &>span{
                color: #fff;
            }
        }
    }
    .brief-introduction{
        position: relative;
        padding: 16px 0 0;

        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;

            &>span{
                color: #fff;
                font-size: 15px;
            }
            &>div{
                &>button{
                    font-size: 12px;
                    opacity: .6;
                    color: #fff;
                    width: 45px;
                    border: none;
                    margin: 0;
                    padding: 0;
                    outline: none;
                    background-color: transparent;

                    &>img{
                        width: 5px;
                        height: 8px;
                        margin-left: 6px;
                        display: inline-block;
                    }
                }
                .open{
                    &>img{
                        transform: rotate(90deg);
                    }
                }
                .close{
                    &>img{
                        transform: rotate(-90deg);
                    }
                }               
            }
        }
        .content{
            font-size: 15px;
            line-height: 26px;
            overflow: hidden;
            color: #fff;

            .normal-line{
                word-wrap: break-word;
                word-break: break-all;
            }
            .line-clamp{
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
    .actors{
        margin-top: 18px;
        .title{
            font-size: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;

            .go-to-all-actors{
                opacity: 0.6;
                font-size: 12px;
                color: #fff;

                &>img{
                    width: 5px;
                    height: 8px;
                    margin-left: 6px;
                    display: inline-block;
                }
            }
        }
        .actor-list{
            margin-top: 11px;

            &>ul{
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                overflow-x: scroll;

                &>li{
                    flex-shrink: 0;

                    &>div{
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-items: center;
                        width: 82px;
                        &>img{
                            width: 80px;
                            height: 112px;
                            display: block;
                            background: none;
                        }
                        .name{
                            height: 18px;
                            line-height: 18px;
                            color: #fff;
                            font-size: 12px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            width: 100%;
                            text-align: center;
                        }
                        .role{
                            height: 18px;
                            line-height: 18px;
                            color: #fff;
                            font-size: 12px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            width: 100%;
                            text-align: center;
                            opacity: 0.4;
                        }
                    }
                }
                .left-margin{
                    margin-left: 6px;
                }
                &::-webkit-scrollbar {
                   display: none;
                 }
            }
        }
    }
    .videos{
        margin-top: 18px;

        .title{
            font-size: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;

            .go-to-all{
                opacity: 0.6;
                font-size: 12px;
                color: #fff;

                &>img{
                    width: 5px;
                    height: 8px;
                    margin-left: 6px;
                    display: inline-block;
                }
            }
        }
        .videos-list{
            margin-top: 11px;

            &>ul{
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                overflow-x: scroll;

                .video{
                    flex-shrink: 0;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    align-items: center;
                    margin-left: 8px;

                    &>div{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;

                        &>img{
                            width: 140px;
                            height: 93px;
                            border-radius: 8px;
                            background: rgba(0,0,0,.7);
                        }
                        .play{
                            position: absolute;
                            top: 30.5px;
                            left: 54px;
                            box-sizing: border-box;
                            width: 32px;
                            height: 32px;
                            background: hsla(0,0%,100%,.9);
                            box-shadow: 0 0 0.04rem 0 rgb(0 0 0 / 30%);
                            border-radius: 16px;

                            .triangle{
                                position: absolute;
                                width: 0;
                                height: 0;
                                border-color: transparent transparent transparent #222;
                                border-style: solid;
                                border-width: 6px 9px;
                                top: 10px;
                                left: 13px;
                            }
                        }
                    }
                }
                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }

    }
    .photos{
        margin-top: 18px;

        .title{
            font-size: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;

            .go-to-all{
                opacity: 0.6;
                font-size: 12px;
                color: #fff;

                &>img{
                    width: 5px;
                    height: 8px;
                    margin-left: 6px;
                    display: inline-block;
                }
            }
        }
        .photos-list{
            margin-top: 11px;

            &>ul{
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                overflow-x: scroll;

                &>li{
                    flex-shrink: 0;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    align-items: center;
                    margin-left: 8px;
                    &>div{
                        width: 140px;
                        height: 93px;
                        display: inline-block;
                        background: #f5f5f5 url("../assets/images/maouanloading.png") no-repeat 50%;                   
                        background-size: 50%;
                        &>img{
                            width: 140px;
                            height: 93px;
                        }
                    }
                }
                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }
}
.discussion{
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    margin-top: -12px;
    position: relative;

    header{
        display: flex;
        justify-content: space-between;
        padding: 13px 16px 14px 16px;

        .title{
            font-size: 15px;
            color: #333;
        }
    }
    .comments{
        .no-padding-top{
            padding-top: 0;
        }
        article{
            padding: 15px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            border-bottom: 0.5px solid #f2f2f2;
            .left{
             .avatar{
                    height: 34px;
                    width: 34px;
                    border-radius: 17px;
                }
            }
            .right{
                margin-left: 11px;
                flex-grow: 1;

                .top{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;

                    .title-container{
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;

                        .name-box{
                            display: flex;
                            align-items: center;

                            .name{
                                font-size: 12px;
                                color: #333;
                            }
                            .level-icon{
                                width: 36px;
                                height: 16px;
                                margin-left: 6px;
                            }
                        }
                        .commentstar{
                            display: flex;
                            flex-direction: row;
                            justify-content: start;
                            align-items: center;

                            .star-wrap{
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;

                                .star-img{
                                    width: 9px;
                                    height: 9px;
                                    margin-right: 2px;
                                }
                                .star-score{
                                    font-size: 12px;
                                    color: #faaf00;
                                    font-family: PingFangSC-Regular;
                                    display: block;
                                    margin-left: 5px;
                                }
                                .star-word{
                                    transform: scale(0.75);
                                    font-size: 12px;
                                    color: #faaf00;
                                    font-family: PingFangSC-Regular;
                                    display: block;
                                }
                            }
                            .commentstar-buyticket{
                                height: 18px;
                                line-height: 18px;
                                border: 0.5px solid #4f89b3;
                                border-radius: 10px;
                                padding: 0 5px;
                                font-family: PingFangSC-Regular;
                                color: #4f89b3;
                                font-size: 12px;
                                text-align: center;
                                display: block;
                                transform: scale(0.75);
                            }
                        }
                    }
                    .title-appove{
                        border-radius: 13px;
                        text-align: center;
                        height: 26px;
                        line-height: 26px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        padding: 0 10px;
                        .hierarchy{
                            .link{
                                .thumb-up{
                                    width: 16px;
                                    height: 16px;
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                                .approve-word{
                                    font-weight: 400;
                                    font-size: 12px;
                                    color: #999;
                                    font-family: PingFangSC-Regular;
                                    margin-left: 5.5px;
                                }
                            }
                        }
                        &::after{
                            content: " ";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 200%;
                            height: 52px;                          
                            transform: scale(0.5);
                            transform-origin: 0 0;
                            border: 1px solid #ccc;
                            border-radius: 26px;
                        }
                    }
                }
                .middle{
                    width: 300px;
                    margin-top: 5px;

                    .comment-content{
                        font-size: 15px;
                        color: #333;
                        line-height: 21px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 7;
                        text-overflow: ellipsis;
                        word-wrap: break-word;
                        word-break: break-all;
                        overflow: hidden;
                    }
                }
                .bottom {
                    margin-top: 10px;
                    font-size:  12px;
                    color: #666;

                    .goto-comments{
                        display: inline-block;
                        .reply{
                            height: 18px;
                            line-height: 18px;
                            display: inline-block;
                            background: #eef1f6;
                            border-radius: 10.5px;
                            text-align: center;
                            font-size: 12px;
                            color: #5a7cab;
                            padding: 2px 6px;
                            margin-left: 8px;
                            &>span{
                                margin-left: 4px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.related-movies{
    margin-top: 8px;
    background-color: #fff;
    margin-bottom: 60px;

    header{
        height: 45px;
        padding-left: 15px;
        font-size: 15px;
        line-height: 45px;
        color: #333;

    }
    .movies{

        &>ul{
            display: flex;
            justify-content: flex-start;
            padding: 0 13px;
            overflow-x: scroll;

            &>li{
                flex-shrink: 0;
                padding: 0 4px 15px 0;

                .img-box{
                    position: relative;
                    width: 96px;
                    height: 134px;
                    border-radius: 2px;
                    overflow: hidden;
                    &>img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                    .img-mask{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-image: linear-gradient(-180deg,rgba(29,29,29,0) 68%,#1d1d1d);
                    }
                    .grade{
                        position: absolute;
                        top: 114px;
                        left: 6px;
                        font-size: 11px;
                        color: #faaf00;
                    }
                }
                .name{
                    height: 22.5px;
                    line-height: 22.5px;
                    display: block;
                    width: 96px;
                    font-size: 15px;
                    color: #333;
                    margin-top: 7px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
            &::-webkit-scrollbar {
                display: none;
            }
        }
    }
}
.buy-ticket-btn{
    background-color: #fff;
    height: 60px;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    margin: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;

    .buy-wrapper{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        &>img{
            margin-left: 24px;
            margin-right: 30px;
            width: 19px;
            height: 19px;
        }
        .goto-ticket{
            flex: 1;
            height: 44px;
            background-image: linear-gradient(-90deg,#fb3333,#ff5269);
            box-shadow: 0 3px 6px 0 rgb(251 51 51 / 30%);
            border-radius: 25px;
            font-size: 17px;
            color: #fff;
            text-align: center;
            line-height: 44px;
            margin: 0 10px;
        }
    }
}
&::-webkit-scrollbar {
    display: none;
 }
}
@keyframes animation1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lodaing {
  width: 100%;
  height: 85vh;
  position: fixed;
  bottom: 50px;
  left: 0;
  background-color: #fff;
  z-index: 99;

  .img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 45px;
    height: 45px;

    img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    .img2 {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      animation: animation1 1s linear 0s infinite;
    }
  }
}
@keyframes animation2 {
    from {
        width: 0;
    }

    to {
        width: 92.2%;
    }
}

@keyframes animation3 {
    from {
        width: 0;
    }

    to {
        width: 6%;
    }
}

@keyframes animation4 {
    from {
        width: 0;
    }

    to {
        width: 1.9%;
    }
}

@keyframes animation5 {
    from {
        width: 0;
    }

    to {
        width: 0.2%;
    }
}

@keyframes animation6 {
    from {
        width: 0;
    }

    to {
        width: 0.9%;
    }
}
</style>